<template>
  <div class="home-wea">
    <!-- 右侧弹出框 -->
    <el-drawer
      :visible.sync="rightRDrawer"
      :with-header="false"
      direction="rtl"
      size="35%"
      @open="handleRightOpen"
      @closed="handleRightClosed"
    >
      <!-- 第一排：天气卡片 -->
      <h3 class="hidden-sm-and-down">实时天气</h3>
      <div class="wcardm hidden-sm-and-down">
        <div class="cardm">
          <div class="card">
            <svg
              id="Layer_1"
              class="weather"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              x="0"
              y="0"
              width="100px"
              height="100px"
              viewBox="0 0 100 100"
              xml:space="preserve"
            >
              <image
                id="image0"
                width="100"
                height="100"
                x="0"
                y="0"
                :href="weatherInfo.src"
              />
            </svg>
            <div class="main">{{ weatherInfo.temp }} °C</div>
            <div class="mainsub">
              {{ weatherInfo.posName }}, {{ weatherInfo.text }}
            </div>
          </div>

          <div class="card2">
            <div class="upper">
              <div class="humidity">
                <div class="humiditytext">
                  相对湿度<br />{{ weatherInfo.humidity }}%
                </div>
                <svg
                  id="Layer_1"
                  xml:space="preserve"
                  viewBox="0 0 30 30"
                  height="30px"
                  width="30px"
                  y="0"
                  x="0"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  xmlns="http://www.w3.org/2000/svg"
                  version="1.1"
                  class="humiditysvg"
                >
                  <image
                    id="image0"
                    href="
          AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABiVBMVEUAAAAAAP9NerV/f39O
          e7ZQfLZVf6pRfbfL5fdRfbZIbbZmmcxols5nl85OebSPsteLrdVSfLZxl89ok9FqlM5ahsBdicNa
          hsFcicRhjcdWgbpahsFfi8ZbhsFijsmErOWLt+9xndZcicJahsFahsFdicN5n81xjcZqlNRpls1q
          lNBfn99pls9nkcxXgrpZgrtik81OebWNsdeMrtZOebRNerVZg7pwmMhNebRKdLRNerZNebHZ8v9o
          lM9jj8rV7v3W7v1ch7+Ktu6Lt/CEsep7p+Cz1PO+3fqJte5/q+V+quOUvvLY8f+TvfKpzvapzfaq
          z/aRvPGdxfSVv/LX8P/W8P+32fnK5vyMuPCmzPXW8P6ny/WWv/KOufGawvO22PjJ5vzB4PrU7v6i
          yPSz1fiYwfKOufDD4funzPXF4vvE4vuOuvHV7/7U7/7G4/uNufCx1Pew0/ev0veu0feQu/G01viP
          ufF/q+SCrud+quSItO2kyvWjyfVijslrltFmkcyEqtZgjMf///8NXQssAAAAPHRSTlMAAZgCW+EG
          y+jMBxRaRXHC2H8bX0ry/vrhyvnw0PDHR0Be/e/4/f4SDDNiEFVb0eI5iMHCho7NwI0YOBdy59Cm
          AAAAAWJLR0SCi7P/RAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB+cCEBITAJMBs+kAAAFb
          SURBVCjPY2CAAUYmZgY8gIWVBY8sGzsHJxc2CW4eXiDJx28jIAjiCgnzgoV5ebiBpIiomK2duISk
          lL2Ng6O0jIwsmCsnIW5nKyYqwiDv5AwELq5uNjY27h6enh5grpcLiHKSZ1BwBgNvH6C0j68zKlCA
          SfvZgIA/LukAsHQAVDgwCE06OAQoGxoMlQ4Lj0CVdo6MsomKhrJjfGwi0aSdY+NiYcx4G5sEdGkk
          kGhjk4RHOjnEJgWPtLNvKprL07CpgktHpEfgk/a3ycAnnWmThRDMxpDOscmFi6Xl5aNLF+QUwqWL
          bIoxogQBSpJskkpwS5cC4yYFp3RZElA6qQwh7VFeAWZXVFYByWpwxNcAueUeQGlFJWUZCZXauloV
          CRllVdt6NbB0QyOIq6TIoK4BSrWaWpogSltHVw8srW8A4mqoY6R6QyOgrLEJztxiamZuZsGGOztZ
          WlnD2QBCYbJl9Cx9XAAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMy0wMi0xNlQxODoxOTowMCswMDow
          MG/wqfUAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjMtMDItMTZUMTg6MTk6MDArMDA6MDAerRFJAAAA
          KHRFWHRkYXRlOnRpbWVzdGFtcAAyMDIzLTAyLTE2VDE4OjE5OjAwKzAwOjAwSbgwlgAAAABJRU5ErkJggg=="
                    y="0"
                    x="0"
                    height="30"
                    width="30"
                  />
                </svg>
              </div>

              <div class="air">
                <div class="airtext">
                  风速<br />{{ weatherInfo.windSpeed }} Km/h
                </div>
                <svg
                  id="Layer_1"
                  class="airsvg"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  x="0"
                  y="0"
                  width="30px"
                  height="30px"
                  viewBox="0 0 30 30"
                  xml:space="preserve"
                >
                  <image
                    id="image0"
                    width="30"
                    height="30"
                    x="0"
                    y="0"
                    href="
            AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABaFBMVEUAAAAA//8ilfIhlfMg
            lvIglfMglvIeku8cjf8glvMhlfIflvMhlfIhlvIglvMhl/MglvIglfIglPEfmfIhlfIglvQfn/8g
            lfIglvIhlfMglfIglvMhl/AhlfIcm/AAf/8qlOkglPYglvIZmf8zmf8hlfIglfIXi+cilPMhlvMg
            lfQhlvMglvIhlfIgl/MglvMhlvMhlfMhlvIfl+8hlvMhlfMglvMglvI/f/8hlvMilvMelvAglfIg
            lvMhlvIglPIglvIhlfIkkfUglfMglfMhlvMhlvMilvMjlfEglvMhlfIhlfMglfIflvEnnOshlvIf
            lPEflfIek/QglvIglvMhlfIime4jlPAglvMglvEhlvMhl/MglfMglfMhlvIak/Edk/UhlvIglfMg
            l/IglvIglfIilPIhlvMhlfMhk/Eqqv8glvIglfMcl/UhlfMhlvIhlvMhlfIglfIhlfIgl/QflPQh
            lvP///+FIn/GAAAAdnRSTlMAAVKu1MmNIQmy91ig/Z5s0fo3KP5dCL27Lvm0NvwSAgwf+woFv7oL
            Q0RGa9L1Vtndx4sgme3FZgTIFiI/hvZld3sch8Tv7kI683nV6DgN4GBQMsycjw8k6nWqRW3cUxMa
            5dpnfLU87N8mBrxXG5jnibjLoi8YaHuXCQAAAAFiS0dEd0Zk+dcAAAAJcEhZcwAACxMAAAsTAQCa
            nBgAAAAHdElNRQfnAhEIBBbLW8PtAAABJ0lEQVQoz62RZ1fCMBSG46atomBR1IJ7g+KotKKgxYl7
            4Z6493x/v6T0QKMtn/p8ec/Nk5Pc5BLiHCWlZeUVlVU21sWBwgvWuho1bqG2Dh6vla0X4ctGQyP8
            VrqpuUVPCQGXlQ+26tEGtBfpX0JHp73t6kYPs9Db159nYDAEj8RoNxjCQ+xxvuFIgZHRMcemQMi4
            iP+I8kRU0TUHG9RJqpWYFVPTcahKsc/jkSAzfgNuVvvjk5gj84W7FhZZvYRl4o0apFawGmT0GsKm
            an0DmzS31O3cQgo75t27SNLYQyRNc/8AhzkROzrOPjCEE1poMk7Pzi8Sl7gyxp5B/Fq4Aa//A7m9
            y7V6/2Ac+/hEy8CzUb68ysDbezp/rZL5+Pz6NvWh/TgwzV+1HV523WQ81AAAACV0RVh0ZGF0ZTpj
            cmVhdGUAMjAyMy0wMi0xN1QwODowNDoyMiswMDowML1dmzYAAAAldEVYdGRhdGU6bW9kaWZ5ADIw
            MjMtMDItMTdUMDg6MDQ6MjIrMDA6MDDMACOKAAAAKHRFWHRkYXRlOnRpbWVzdGFtcAAyMDIzLTAy
            LTE3VDA4OjA0OjIyKzAwOjAwmxUCVQAAAABJRU5ErkJggg=="
                  />
                </svg>
              </div>
            </div>

            <div class="lower">
              <div class="aqi">
                <svg
                  id="Layer_1"
                  class="aqisvg"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  x="0"
                  y="0"
                  width="20px"
                  height="20px"
                  viewBox="0 0 20 20"
                  xml:space="preserve"
                >
                  <image
                    id="image0"
                    width="20"
                    height="20"
                    x="0"
                    y="0"
                    href="
          AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABBVBMVEUAAABL4f9O5v9P5f9Q
          5f9R5/8AZsxB0vYAd9EAeNQAd9MeoOM1w/EYmuIZm+IXnOIAAP8AccYmrOgYmuAWneEA//8AdtQZ
          m+JP5f8ZmeUAf89L3vwcoOQYmeIAddEAeNUrseocjeIAd9QAeNMxu+4kqucZmuEYm+IWmeI5xfIf
          n99P3/9Q5v9Q5v9Q5v9G2Pk0wPA+zfZN4v5L3/w+zfUyve8iqOcrs+s9zPVM4f1N4v1E1vklrOki
          p+cmrOhH2fpP5f5F1/kstewqs+tO4/4nruott+0or+pL3vxE1flK3vxA0fcjqecrtOxO5P4yvvAs
          tOw6yPNA0Pc7yfQ4xfI3xPL////cI4U2AAAALnRSTlMAEXF3ZWsFeC3S26iVh7MsAQnAVCIBZ7Ft
          ChBv6GonVZQJs4yLxtPNLY8IEHuINVg0ZAAAAAFiS0dEVgoN6YkAAAAJcEhZcwAACxMAAAsTAQCa
          nBgAAAAHdElNRQfnAhIFCRn0J5yMAAAAq0lEQVQY02NgIAkwMjFDARMjXJBFDw5Y4IKsCEFWmBgb
          u56+gaERsiAHJxe3nrGJqZm5haWeFQ8vHz9QUEAQqt3a1MbWTkhYRBRmprG9A5qZYuJ6jk62ziYu
          QEEJSaiglDRIjaOpraubu4wsupM8PL2g2gXk5BX0vH18LYwgZiqCLOJQUlbR0/Nz9LcNCAwKVlVT
          10DRbh1iGqqphc+b2ANEW0cXCnS0SQt0ALCcIug70CWhAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIz
          LTAyLTE4VDA1OjA5OjI1KzAwOjAwRMIpTAAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMy0wMi0xOFQw
          NTowOToyNSswMDowMDWfkfAAAAAodEVYdGRhdGU6dGltZXN0YW1wADIwMjMtMDItMThUMDU6MDk6
          MjUrMDA6MDBiirAvAAAAAElFTkSuQmCC"
                  />
                </svg>
                <div class="aqitext">能见度<br />{{ weatherInfo.vis }}</div>
              </div>

              <div class="realfeel">
                <svg
                  id="Layer_1"
                  class="rfsvg"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  x="0"
                  y="0"
                  width="20px"
                  height="20px"
                  viewBox="0 0 20 20"
                  xml:space="preserve"
                >
                  <image
                    id="image0"
                    width="20"
                    height="20"
                    x="0"
                    y="0"
                    href="
          AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABuVBMVEUAAAAAAAAECQkIDg4E
          BAQAAAAAAAAFBQUHDAwIDg4MFBUNFRUKCgoPGhxGenw/b3FDdXcmRUYJDAwJDw9Pi40LFBQNFhYM
          FhYPGhsMExUKEhIPGhoKEhQMExMOGhoMExMPGhoKFBQLExMNFxcKEhILFBQKExMKExQLEhILERMK
          EREHDQ1SkJMuUlMABAQAAAASHh9FeXtAcXI8aWszWlwvU1M4Y2QjPT4NGBoAAAAAAAAAAAAAAAAA
          AAAAAAAAAAAAAABYmZtWlplKgoVlsbRsvsF0zM9uwsVuwcNsvb9ecU53czF0bStgbkdqt7dntbhp
          tbVxaCf5uxD+vxD7vBBTUilYlZdtwMNms7Zdc1P8vRDYpBR5b0imsKy0wcFzhoZdkpRldEx6cU3W
          5eWLnJxdm51otrlZdl67kBWxvbmUo6RmfHxajo9ouLpqt7mJdiN8YxnH1dWVpaVfn6Jgl41OUUKv
          u7pWe3xwxsldn6KmtLTO3NxUf4BswMN0ys1gpaedrKzT4uJjd3dsvcBqubxXg4Vgd3hthYVid3dh
          dnZof39shYVkf4BVeXpqt7pksbJjr7Jdo6X////f0mPcAAAAQXRSTlMABGh/a1xUZIqPo7BH2vv4
          /vJQgvyxwLLCpqXBsafBqcKutcCwuamtop+SgPzwOQzg/f728fD166Zla1o/PiEmFs+XjUIAAAAB
          YktHRJKWBO8gAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH5wISBQ8aO3RqsAAAAQlJREFU
          GNNjYMAOGJmYmVlY2djYmZk5OLm4ecBivHyOTs7O/ALOTo6Oji6ugkJAQWERNxTgLgoUFEMVc/MQ
          BwpKuLl5enn7+PpBBf0lwYIBgUHBwSGhYeFgwQgpoKC0W2RUcHB0TGxcfAJYuwxYMDE4OCgpGQhS
          UoGCabJAQTm39KDgjEyQYHJWdo5brjxQUMEtLz+ooDAZAoqKXRXBgm4lpWXJMFBeoQQUVHZzq6yC
          i1XX1KoABVXr3OobYGKNTc0takBBdVc3t9a29vaOzq7unt4+t34NoKDmBFRvTtQCCmrroArq6gEF
          9Q0MnY2MTUxNzYxBwNwCHMj6llbWNrZ29jZg4IAjKhgAAWdbVO4nzP4AAAAldEVYdGRhdGU6Y3Jl
          YXRlADIwMjMtMDItMThUMDU6MTU6MjYrMDA6MDCumAyfAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIz
          LTAyLTE4VDA1OjE1OjI2KzAwOjAw38W0IwAAACh0RVh0ZGF0ZTp0aW1lc3RhbXAAMjAyMy0wMi0x
          OFQwNToxNToyNiswMDowMIjQlfwAAAAASUVORK5CYII="
                  />
                </svg>
                <div class="realfeeltext">
                  体感温度<br />{{ weatherInfo.feelsLike }} °C
                </div>
              </div>

              <div class="pressure">
                <svg
                  id="Layer_1"
                  class="pressuresvg"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  x="0"
                  y="0"
                  width="20px"
                  height="20px"
                  viewBox="0 0 20 20"
                  xml:space="preserve"
                >
                  <image
                    id="image0"
                    width="20"
                    height="20"
                    x="0"
                    y="0"
                    href="
          AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABNVBMVEUAAAAAr8EArMAAqsAA
          rMEBrMEBrMAAq8AArb8AqsIBrMEgtMa53+S53+QetMYArMEArMEAqrsArMA9scFegp4Cqr8Ao8gA
          rMEErMHn6+wTobgArMAArMBCvc1sco8Aq8EArMFSqrmNWn1Dvs4Aq8EErcLo7O0SorgArMAAq8A8
          sMBie5gCqr8BrMEftMa23eO33uQcs8YAq8AArMAAq8ABq8AAq8EAq8Mtdn9DW2OvvcSwvcSrucJ3
          kZyvvcWvv8OruMJ6kZ55kJ2rusAArMHFzdLH0NS5xMru7u7l5+jm6Ojp3eDd4OK2ubvAhZL4G0en
          rK1YYWV3foHu7e39Mlns7OwzXWQxW2Tl5+f6VHSssLKpra/9MVnc4OL1m6y5xcvv09kxcX5FWmR4
          kJywvsWsusL///80ikJBAAAARHRSTlMAHUotv/j5vSw/9cvd3MrzPg/q4+rqDnXk+/NzucP3t873
          /cJ05Przcunj8en0y93cyz28/vu7K1RASpWb/YBAhvP3hpKCbb4AAAABYktHRGYs1NklAAAACXBI
          WXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH5wISBRAIBZcVZgAAAM1JREFUGNNjYMAHGJmYGNGEmFlc
          WNlc2DmQxTi5uHlc3Xj5+AUQYoJCwu4enl4e3iKiYnBBcQlJHw8PD18/fylpuKCMLFAoIDAoOERO
          Hi6ooOjuERoWHuERqaSAUKkMVBkV7REcg6RSRVUtFijsEeevroGwXVMrHiSYoK2DsJ1BQFdP38PD
          wJDfCNn1HMYmpqYmZuZoHrVITLTACBDLpCRLJK6VNRDY2CYn29qAWFZgQbsUIEhNBoJUEMsOLGhv
          BwQOjk5Ojs4glj0DCQAAJCUofMKIT9cAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjMtMDItMThUMDU6
          MTY6MDgrMDA6MDBXtcu8AAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIzLTAyLTE4VDA1OjE2OjA4KzAw
          OjAwJuhzAAAAACh0RVh0ZGF0ZTp0aW1lc3RhbXAAMjAyMy0wMi0xOFQwNToxNjowOCswMDowMHH9
          Ut8AAAAASUVORK5CYII="
                  />
                </svg>
                <div class="pressuretext">
                  大气压强<br />{{ weatherInfo.pressure }} mbar
                </div>
              </div>
              <div class="card3">{{ weatherInfo.obsTime }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 第二排：切换生活指南卡片 -->
      <h3>天气指数</h3>
      <div class="radio-inputs">
        <label v-for="item in svgArr" :key="item.id" @click="openTip(item.id)">
          <input class="radio-input" type="radio" name="engine" />
          <span class="radio-tile">
            <span class="radio-icon">
              <svg class="icon" aria-hidden="true">
                <use :xlink:href="`${item.logo}`" />
              </svg>
            </span>
            <span class="radio-label">{{ item.name }}</span>
          </span>
        </label>
      </div>

      <!-- 第三排：天气预报图表 -->
      <h3>天气预报</h3>
      <FutureLine v-if="isExist" :chartInfo="chartInfo" />
    </el-drawer>

    <!-- 左侧弹出框 -->
    <el-drawer
      :visible.sync="leftDrawer"
      :with-header="false"
      :modal="false"
      direction="ltr"
      size="25%"
      @close="handleLeftClose"
    >
      <div class="loader">
        <span />
        <span />
        <span />
        <span />
        <span />
        <span />
      </div>
      <!-- 生活指数卡片 -->
      <div class="index-card">
        <div class="stars">
          <svg
            v-for="i in indexs.level"
            :key="i"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
            fill="currentColor"
            class="star"
          >
            <path
              d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
            />
          </svg>
        </div>

        <div class="info">
          <p class="date-time">{{ indexs.category }}</p>
          <p class="description">
            {{ indexs.text }}
          </p>
        </div>

        <div class="author">— {{ indexs.name }}</div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import '@/icon/weather/iconfont.js'

import $ from 'jquery'
import { debounce } from 'lodash-es'

import { getTipInfo } from '@/api/getLocationInfo'

import FutureLine from './chart/FutureLine'
export default {
  name: 'Weather',
  components: {
    FutureLine
  },
  data() {
    return {
      rightRDrawer: false,
      leftDrawer: false,
      svgArr: [
        {
          id: 2,
          logo: '#icon-xichekaidan',
          name: '洗车指数'
        },
        {
          id: 3,
          logo: '#icon-yifu',
          name: '穿衣指数'
        },
        {
          id: 1,
          logo: '#icon-yundong',
          name: '运动指数'
        },
        {
          id: 5,
          logo: '#icon-guangheyouxiaofushe',
          name: '紫外线'
        },
        {
          id: 4,
          logo: '#icon-Fishing',
          name: '钓鱼指数'
        },
        {
          id: 8,
          logo: '#icon-shushidu',
          name: '舒适指数'
        },
        {
          id: 9,
          logo: '#icon-shengbing',
          name: '感冒指数'
        },
        {
          id: 6,
          logo: '#icon-lvyou',
          name: '旅游指数'
        },
        {
          id: 13,
          logo: '#icon-huazhuangpin',
          name: '化妆指数'
        },
        {
          id: 16,
          logo: '#icon-fangshaishuang',
          name: '防晒指数'
        },
        {
          id: 11,
          logo: '#icon-kongtiao',
          name: '空调指数'
        },
        {
          id: 7,
          logo: '#icon-guomin',
          name: '过敏指数'
        }
      ],
      // 天气信息
      weatherInfo: {
        humidity: '',
        windSpeed: '',
        feelsLike: '',
        vis: '',
        pressure: ''
      },
      chartInfo: {},
      // 经纬度
      cor: '',
      isExist: false,
      // 指数
      indexs: {}
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.$parent.changeToWea()
    })

    this.$bus.$on('wea', this.receiveWeaInfo)
  },
  beforeDestroy() {
    this.$bus.$off('wea')
  },
  methods: {
    receiveWeaInfo(info, cor, chartInfo) {
      this.weatherInfo = info
      this.cor = cor
      this.chartInfo = chartInfo
      let src = ''
      const text = info.text
      if (text === '阴') src = require('@/assets/weather/cloudy.png')
      else if (text === '多云') src = require('@/assets/weather/multiCloud.png')
      else if (text === '晴') src = require('@/assets/weather/sunny.png')
      else if (text === '雾') src = require('@/assets/weather/fog.png')
      else if (text.indexOf('雨') !== -1)
        src = require('@/assets/weather/rain.png')
      else src = require('@/assets/weather/clear.png')
      this.weatherInfo.src = src
      this.rightRDrawer = true
    },
    handleRightOpen() {
      this.isExist = true
    },
    handleRightClosed() {
      this.isExist = false
    },
    handleLeftClose() {
      $('.radio-input').prop('checked', false)
    },
    openTip: debounce(async function (type) {
      const res = await getTipInfo(this.cor, type)
      if (res && res.code === '200') {
        this.indexs.category = res.daily[0].category
        this.indexs.text = res.daily[0].text
        this.indexs.name = res.daily[0].name
        this.indexs.level = Number(res.daily[0].level)
        this.leftDrawer = true
      }
    }, 500)
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/icon.scss';

.home-wea {
  ::v-deep .el-drawer__wrapper {
    overflow: none;

    .el-drawer__container {
      height: 100vh;

      .el-drawer__body {
        position: relative;
      }
    }
  }

  ::v-deep .icon {
    @include icon;
  }

  h3 {
    padding: 10px 0;
    text-align: center;
  }
  // 天气卡片样式开始
  .wcardm {
    position: relative;
    height: 200px;
    overflow-x: clip;

    .cardm {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 100;
      display: flex;
      display: -webkit-box;
      display: flexbox;
      align-items: center;
      justify-content: center;
      transform: translate(-50%, -50%);
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;

      .card {
        position: absolute;
        z-index: 2;
        width: 250px;
        height: 130px;
        color: black;
        background: whitesmoke;
        border-radius: 25px;
        transition: 0.4s ease-in-out;

        .weather {
          position: relative;
          margin: 1em;
        }

        .main {
          position: relative;
          top: -3em;
          left: 4.3em;
          font-size: 2em;
        }

        .mainsub {
          position: relative;
          top: -10.2em;
          left: 14em;
          font-size: 0.6em;
        }

        &:hover {
          cursor: pointer;
          background-color: #ffe87c;

          & + .card2 {
            height: 300px;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;

            .lower {
              top: 20.2em;
            }
          }
        }
      }

      .card2 {
        position: absolute;
        z-index: -1;
        display: -webkit-box;
        display: flexbox;
        display: flex;
        flex-direction: row;
        width: 240px;
        height: 130px;
        background: white;
        border-radius: 35px;
        transition: 0.4s ease-in-out;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;

        .upper {
          position: relative;
          top: 0.5em;
          left: 1.8em;
          display: -webkit-box;
          display: flexbox;
          display: flex;
          flex-direction: row;
          gap: 4em;
          color: black;
          -webkit-box-orient: horizontal;
          -webkit-box-direction: normal;

          .humiditytext {
            position: relative;
            top: 2.7em;
            left: 3.6em;
            font-size: 0.6em;
          }

          .airtext {
            position: relative;
            top: 2.7em;
            left: 3.8em;
            font-size: 0.6em;
          }
        }

        .lower {
          position: absolute;
          top: 1em;
          left: 3em;
          display: -webkit-box;
          display: flexbox;
          display: flex;
          flex-direction: row;
          margin-top: 0.7em;
          font-size: 0.7em;
          color: black;
          text-align: center;
          transition: 0.4s ease-in-out;
          -webkit-box-orient: horizontal;
          -webkit-box-direction: normal;

          .aqi {
            margin-right: 3.25em;
          }

          .realfeel {
            margin-right: 1.8em;
          }

          .card3 {
            position: absolute;
            top: 4.7em;
            left: -2.4em;
            display: -webkit-box;
            display: flexbox;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            width: 240px;
            height: 30px;
            font-size: 1.24em;
            background: limegreen;
            border-bottom-right-radius: 35px;
            border-bottom-left-radius: 35px;
            transition: 0.4s ease-in-out;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
          }
        }
      }
    }
  }

  // 生活指南卡片开始
  .radio-inputs {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: repeat(auto-fill, 100px);
    grid-gap: 20px;
    align-items: center;
    justify-content: center;

    & > * {
      margin: 6px;
    }

    .radio-input {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      clip-path: inset(100%);
      white-space: nowrap;

      &:checked {
        & + .radio-tile {
          color: #2260ff;
          border-color: #2260ff;
          box-shadow: 0 5px 10px rgb(0 0 0 / 10%);

          &::before {
            background-color: #2260ff;
            border-color: #2260ff;
            opacity: 1;
            transform: scale(1);
          }

          .radio-icon svg {
            fill: #2260ff;
          }

          .radio-label {
            color: #2260ff;
          }
        }
      }

      &:focus {
        & + .radio-tile {
          border-color: #2260ff;
          box-shadow: 0 5px 10px rgb(0 0 0 / 10%), 0 0 0 4px #b5c9fc;

          &::before {
            opacity: 1;
            transform: scale(1);
          }
        }
      }
    }

    .radio-tile {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 80px;
      min-height: 80px;
      cursor: pointer;
      background-color: #fff;
      border: 2px solid #b5bfd9;
      border-radius: 0.5rem;
      box-shadow: 0 5px 10px rgb(0 0 0 / 10%);
      transition: 0.15s ease;

      &::before {
        position: absolute;
        top: 0.25rem;
        left: 0.25rem;
        display: block;
        width: 0.75rem;
        height: 0.75rem;
        content: '';
        background-color: #fff;
        border: 2px solid #b5bfd9;
        border-radius: 50%;
        opacity: 0;
        transition: 0.25s ease;
        transform: scale(0);
      }

      &:hover {
        border-color: #2260ff;

        &::before {
          opacity: 1;
          transform: scale(1);
        }
      }

      .radio-icon {
        svg {
          width: 2rem;
          height: 2rem;
          fill: #494949;
        }
      }

      .radio-label {
        font-size: 13px;
        color: #707070;
        text-align: center;
        transition: 0.375s ease;
      }
    }
  }

  // 左侧文字样式
  .index-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: 320px;
    padding: 20px;
    margin-top: 50%;

    .stars {
      display: flex;
      grid-gap: 0.125rem;
      gap: 0.125rem;
      color: rgb(238 203 8);

      .star {
        width: 1.25rem;
        height: 1.25rem;
      }
    }

    .info {
      margin-top: 1rem;

      .date-time {
        font-size: 12px;
        font-weight: 600;
        color: rgb(7 63 216 / 100%);
      }

      .description {
        margin-top: 0.4rem;
        line-height: 1.625;
        color: rgb(107 114 128 / 100%);
      }
    }

    .author {
      margin-top: 1.3rem;
      font-size: 0.875rem;
      line-height: 1.25rem;
      color: rgb(107 114 128 / 100%);
    }
  }
}
</style>
